<template>
<div class="text-center">
  My User Page
  <el-form-item>
    <el-button type="primary" @click="clickQuery">查询</el-button>
    <el-button type="primary" @click="clickCreate">新增</el-button>
  </el-form-item>
</div>

<el-row>
  <el-col :span="12" :offset="6" >
    <el-table :data="state.tableData" style="width: 100%" v-loading="state.loading">
      <el-table-column prop="name" label="用户名" width="180"></el-table-column>
      <el-table-column prop="website" label="网站" width="180"></el-table-column>
      <el-table-column prop="phone" label="手机"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="email" label="操作">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button  @click="editRow(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-col>

  <el-drawer
    title="我是标题"
    v-model="state.drawer"
    direction="rtl"
    :before-close="handleClose" destroy-on-close>

    <div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
          <el-switch v-model="ruleForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质" prop="type">
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">立即创建</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

  </el-drawer>

</el-row>

</template>

<script setup>
import {getUser} from '../server/user'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'

const state = reactive({
  loading: false,
  drawer: false,
  tableData: [],
})

const ruleForm = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: '',
    type: [],
    resource: '',
    desc: ''
})

const rules = reactive({
  name: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  ],
  region: [
    { required: true, message: '请选择活动区域', trigger: 'change' }
  ],
  date1: [
    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
  ],
  date2: [
    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
  ],
  type: [
    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
  ],
  resource: [
    { required: true, message: '请选择活动资源', trigger: 'change' }
  ],
  desc: [
    { required: true, message: '请填写活动形式', trigger: 'blur' }
  ]
})

const ruleFormRef = ref()

const clickQuery = () => {
  state.loading = true
  getUser().then(res => {
    state.loading = false
    state.tableData = res.data
    console.log(state.tableData)
  })
}

const clickCreate = () => {
  state.drawer = true
}

const editRow = (row) => {
  ruleForm.name = '野营'
  ruleForm.region = 'shanghai'
  ruleForm.date1 = '2021-03-03'
  ruleForm.date2 = new Date(2021, 9, 10, 18, 40)
  ruleForm.delivery =  true,
  ruleForm.type = [],
  ruleForm.resource = '线上品牌商赞助',
  ruleForm.desc = '我是描述'
  state.drawer = true
}
const handleClose = () => {
  state.drawer = false
  resetForm()
}

const submitForm = () => {
  console.log(ruleForm)
  ruleFormRef.value.validate((valid) => {
    if(valid){
      console.log(111)
      ElMessage.success('创建成功');
      handleClose()
    } else {
      ElMessage.error('错了哦，这是一条错误消息');
    }
  })
}

const resetForm = () => {
  ruleFormRef.value.resetFields();
}

</script>
